import {messages} from "share/common";
import React from "react";
import { connect } from 'react-redux'
import { Button, Icon, message, Select, Input } from 'antd'
import ListSort from 'components/list-sort'
import 'styles/help-center-admin/question-maintenance-sort.scss'
import QuestionMaintenanceService from 'containers/help-center-admin/question-maintenance/question-maintenance-service'
import menuRoute from "routes/menuRoute";

class QuestionMaintenanceSort extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      categoryList: [],
      quesMain: menuRoute.getRouteItem('question-maintenance', 'key').url,
    }
  }


  componentWillMount (){
    this.getCategoryList();
  }

  //获取问题分类列表
  getCategoryList = () => {
    QuestionMaintenanceService.getCategoryList('COMMONPROBLEM', this.props.language.code).then(res => {
      this.setState({
        loading: false,
        categoryList: res.data,
      });
    }).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };

  //分类排序时
  handleSortQues = (result) => {
    let arr = [];
    result.map((item) => {
      arr.push({
        id: item.key,
      })
    });
    this.setState({ quesSortList: arr });
  };


  finishSort = () => {
    const {quesSortList, quesMain} = this.state;
    this.setState({
      loading: true,
    });
    let ids = [];
    quesSortList.map(item => {
      ids.addIfNotExist(item.id)
    });
    QuestionMaintenanceService.sortCategoryList(ids).then(res => {
      message.success('操作成功');
      this.setState({
        loading: false,
      });
      this.context.router.push(quesMain)
    }).catch(err => {
      this.setState({
        loading: false,
      });
    });
  };


  render() {
    const {categoryList, quesMain, loading} = this.state;
    return (
      <div className={'question-maintenance-sort'} style={{ position: 'relative' }}>
        <div style={{marginBottom: 20}}>
          <Button style={{marginRight: 10}} type={'primary'} onClick={this.finishSort} loading={loading}> {messages('help-center-admin.key16')/*完成*/}
          </Button>
          <Button onClick={() => {this.context.router.push(quesMain)}} type={'primary'} ghost> {messages('common.back')/*返回*/}
          </Button>
        </div>
        <ListSort onChange={this.handleSortQues} dragClassName="list-drag-selected">
          {categoryList && categoryList.map(category => {
            return (
              <div className={'category-list-category'}
                   key={category.id}
                   style={{cursor: 'move'}}>
                <div className={'category-list-name'} style={{cursor: 'move'}}>
                  <Icon type="bars" style={{marginRight:10}}/>{category.name}
                  &nbsp;&nbsp;
                  {!category.enabled &&
                  <Button size={'small'} style={{background: 'black', color: 'white', fontSize: 9}}> {messages('common.disabling')/*已禁用*/}</Button>
                  }
                  </div>
              </div>
            )
          })}
        </ListSort>
      </div>
    )
  }
}

QuestionMaintenanceSort.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    language: state.main.language,
  }
}

export default connect(mapStateToProps)(QuestionMaintenanceSort)
